<template>
	<view class="shopping_cart_page" :style="`padding-top: ${puplicNavHeight}px; padding-bottom: 160rpx`">
		
		<puplic-nav titleTxt="首页" :flag="isFlag" :isBack="false" @update:puplicNavHeight='getPuplicNavHeight'>
			<template #header>
				<view class="puplic_tabs_list" style="width: 100%; justify-content: start; padding: 0 44rpx;">
					<view class="item_tabs"><view class="txt_sty">回收箱(卖)</view></view>
					<view class="active item_tabs" style="margin-left: 60rpx;"><view class="txt_sty">购物车(买)</view></view>
				</view>
			</template>
		</puplic-nav>
		
		<view class="cart_area_block_1">
			
			<view class="flex_box aic bb1 pa32">
				<view class="item ov">
					<view class="df aic">
						<view class="checked icon_checkbox"></view>
						<view class="ml15 fs24 cor_333">全选</view>
					</view>
				</view>
				<view class="df aic">
					<image src="@/static/images/icon_09.png" class="img_4"></image>
					<view class="ml10 fs24 lh40 cor_999">清空购物袋</view>
				</view>
			</view>
			
			<template v-for="(item, index) in 1" :key="index">
			
				<up-swipe-action>
					<up-swipe-action-item
						v-model:show="show"
						:options="options1"
					>
						<view class="flex_box cart_area_item">
							<view class="df aic">
								<view class="checked icon_checkbox"></view>
							</view>
							<view class="ml25 re mr15"><image src="@/static/images/banner_01.png" class="cart_pic_size"></image></view>
							<view class="item ov">
								<view class="df fldc jcsb hp100">
									<view class="fs32 lh40 cor_000 clamp_1">马里奥 奥德赛</view>
									<view class="specifications_box flex_box aic">
										<view class="item ov"><view class="clamp_1">裸卡简装，中文，非国行</view></view>
										<image src="@/static/images/icon_arw_5.png" class="ml15" style="width: 20rpx; height: 16rpx;"></image>
									</view>
									<view class="flex_box aic">
										<view class="item ov"><view class="fs28 cor_333 lh40">¥ 96.00</view></view>
										<view class="cart_step_box">
											<view class="item_step_add">-</view>
											<view class="step_ipt_num">1</view>
											<view class="current item_step_minus">+</view>
										</view>
									</view>
								</view>
								
							</view>
						</view>
					</up-swipe-action-item>
				</up-swipe-action>
			</template>
			
		</view>
		
		<view class="settlement_area_fix">
			<view class="flex_box aic hp100">
				
				<view class="df aic mr20 ">
					<view class="checked icon_checkbox"></view>
					<view class="ml15 fs24 cor_333">全选</view>
				</view>
				
				<view class="item ov">
					<view class="df aic">
						<view class="fs28 cor_333">合计:</view>
						<view class="fs32 cor_F52">¥1351.80</view>
					</view>
					<view class="df aic">
						<view class="fs20 cor_333">优惠减:</view>
						<view class="fs20 cor_333">¥1689.20</view>
					</view>
				</view>
				
				<view class="settlement_btn">去结算(2)</view>
				
			</view>
		</view>
		
	</view>
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	import PuplicNav from '@/components/puplicNav/index.vue';
	
	const isFlag = ref(true); //控制自定义导航栏背景色
	
	const show = ref(false);
	
	
	// 使用 reactive 创建响应式对象  
	const options1 = reactive([{  
	    text: '删除',
		style: {  
		  backgroundColor: 'red'  
		} 
	}]); 
	
	const puplicNavHeight = ref(0);
	
	const getPuplicNavHeight = (val) => {
		console.log('当前自定义导航栏的高度======>', val);
		puplicNavHeight.value = val;
	};
	
	onPageScroll((e) => {
		if(e.scrollTop >= 80) {
			isFlag.value = true;
		}else {
			isFlag.value = true;
		}
	});
	
</script>

<style lang="scss" scoped>
	
	.shopping_cart_page {
		position: relative;
		padding: 32rpx 0;
		min-height: 100vh;
		background: linear-gradient(90deg, #FFEEEE 0%, #FFFFFF 90.99%);
		.icon_checkbox {
			position: relative;
			width: 32rpx;
			height: 32rpx;
			background: url(@/static/images/icon_cart_checkbox_1.png) no-repeat;
			background-size: 32rpx;
			&.checked {
				background: url(@/static/images/icon_cart_checkbox_2.png) no-repeat;
				background-size: 32rpx;
			}
		}
		.cart_area_block_1 {
			position: relative;
			background: #fff;
			border-radius: 8rpx;
			margin-top: 32rpx;
			
			
			.cart_area_item {
				position: relative;
				padding: 40rpx 32rpx;
				border-bottom: 1px solid #eee;
				.cart_pic_size {
					position: relative;
					width: 230rpx;
					height: 146rpx;
					border-radius: 8rpx;
					vertical-align: middle;
				}
				.specifications_box {
					position: relative;
					height: 40rpx;
					font-size: 20rpx;
					color: #999;
					padding: 0 24rpx 0 16rpx;
					border-radius: 4rpx;
					background: #F2F2F2;
				}
				.cart_step_box {
					position: relative;
					display: flex;
					align-items: center;
					.item_step_add, .item_step_minus {
						display: flex;
						// align-items: center;
						justify-content: center;
						width: 36rpx;
						height: 36rpx;
						line-height: 30rpx;
						font-size: 22rpx;
						color: #999;
						background-color: #fff;
						border: 1px solid #e0e0e0;
						border-radius: 50%;
						&.current {
							color: #fff;
							background: #F5220F;
							border-color: #F5220F;
						}
					}
					.step_ipt_num {
						position: relative;
						display: inline-block;
						width: 60rpx;
						line-height: 36rpx;
						text-align: center;
						font-size: 32rpx;
						color: #333;
						margin-left: 10rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		
		.settlement_area_fix {
			position: fixed;
			left: 24rpx;
			right: 24rpx;
			bottom: 32rpx;
			height: 104rpx;
			padding: 0 8rpx 0 36rpx;
			background: #fff;
			border-radius: 52rpx;
			box-shadow: 0px 16rpx 24rpx  #ccc;
			z-index: 5;
			.settlement_btn {
				position: relative;
				width: 234rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
				background: #F5220F;
			}
		}
		
	}

</style>
